<template>
  <el-button
    :loading="loading"
    type="primary"
    size="large"
    style="margin-right: 10px"
    @click="handleUpload"
  >
    <i-ep-Upload></i-ep-Upload>
    导入
  </el-button>
  <input
    ref="target"
    class="excel-upload-input"
    type="file"
    accept=".xlsx"
    @change="fileChange"
  />
</template>

<script lang="ts" setup>
import { useAnalysisExcel } from '@/hooks/use-excel'
const emit = defineEmits(['fileUpload', 'startHandle'])
// 自定义上传文件
const loading = ref(false)
const target = ref<HTMLInputElement | null>(null)
const handleUpload = () => {
  target.value?.click()
}
const fileChange = (e: Event) => {
  const files = (e.target as HTMLInputElement)?.files!
  const rawFile = files[0] // only use files[0]
  if (!rawFile) return
  emit('startHandle')
  upload(rawFile)
}
const upload = async (rawFile: File) => {
  loading.value = true
  target.value && (target.value.value = '') //清空文件域中的文件路径，解决不能选择相同的文件问题
  const { header, dataResult } = await useAnalysisExcel(rawFile)
  console.log(header)
  emit('fileUpload', dataResult)
  loading.value = false
}
</script>

<style scoped>
.excel-upload-input {
  display: none;
  z-index: -9999;
}
</style>
